<script setup>
import {ref} from "vue";
import {Coin, Goods, MessageBox, School} from "@element-plus/icons-vue";
import request5151 from "../../utils/request5151.js";
import {ElMessage} from "element-plus";

const registered = ref(0)
const roomed = ref(0)
const geted = ref(0)
const payed = ref(0)
const allStatus = ref(0)
const getAllStatus = () => {
  if (registered.value === 1 && roomed.value === 1 && geted.value === 1 && payed.value === 1) {
    allStatus.value = 1
  }
}
getAllStatus()
// 获取当前学生进度
const getMyProgress = () => {
  if (sessionStorage.getItem('snumber') != null) {
    request5151({
      url: '/welcomeProgress/getProgressBySNumber',
      method: 'get',
      params:{
        sNumber: sessionStorage.getItem('snumber')
      }
    }).then((res) => {
      if (res.data.code === 200) {
        registered.value = res.data.data.registered
        roomed.value = res.data.data.roomed
        geted.value = res.data.data.geted
        payed.value = res.data.data.payed
        getAllStatus()
      }
    })
  }else {
    ElMessage.error('暂无信息')
  }
}
getMyProgress()
</script>

<template>
  <div class="myProgressAll">
    <!--...................................................-->
    <div class="item" v-if="registered===0">
      <el-icon color="rgb(227,227,227)" size="250" class="myIcon">
        <MessageBox/>
      </el-icon>
      <el-button class="myButton" type="info">注册未完成</el-button>
    </div>
    <div class="item" v-if="registered===1">
      <el-icon color="rgb(166,210,255)" size="250" class="myIcon">
        <MessageBox/>
      </el-icon>
      <el-button class="myButton" type="success">注册完成</el-button>
    </div>
    <!--......................................................-->
    <div class="item" v-if="roomed===0">
      <el-icon color="rgb(227,227,227)" size="250" class="myIcon">
        <School/>
      </el-icon>
      <el-button class="myButton" type="info">宿舍未分配</el-button>
    </div>
    <div class="item" v-if="roomed===1">
      <el-icon color="rgb(166,210,255)" size="250" class="myIcon">
        <School/>
      </el-icon>
      <el-button class="myButton" type="success">宿舍完成</el-button>
    </div>
    <!--......................................................-->
    <div class="item" v-if="geted===0">
      <el-icon color="rgb(227,227,227)" size="250" class="myIcon">
        <Goods/>
      </el-icon>
      <el-button class="myButton" type="info">领取未完成</el-button>
    </div>
    <div class="item" v-if="geted===1">
      <el-icon color="rgb(166,210,255)" size="250" class="myIcon">
        <Goods/>
      </el-icon>
      <el-button class="myButton" type="success">领取完成</el-button>
    </div>
    <!--......................................................-->
    <div class="item" v-if="payed===0">
      <el-icon color="rgb(227,227,227)" size="250" class="myIcon">
        <Coin/>
      </el-icon>
      <el-button class="myButton" type="info">缴费未完成</el-button>
    </div>
    <div class="item" v-if="payed===1">
      <el-icon color="rgb(166,210,255)" size="250" class="myIcon">
        <Coin/>
      </el-icon>
      <el-button class="myButton" type="success">注缴完成</el-button>
    </div>
  </div>
  <div class="bottom">
    <h2 style="font-family:KaiTi;" v-if="allStatus===1">恭喜你！已经完成了所有流程。</h2>
    <h2 style="font-family:KaiTi;" v-if="allStatus===0">还有未完成的流程哦。</h2>
  </div>
</template>

<style scoped>
.bottom {
  width: 100%;
  height: 100px;
  background-color: #95ead1;
  text-align: center;
  padding-top: 10px;
}

.myButton {
  margin-left: 120px;
  margin-top: 80px;
}

.myIcon {
  margin-left: 50px;
}

.item {
  width: 350px;
  height: 400px;
  margin-top: 80px;
  border-radius: 50px;
}

.myProgressAll {
  width: 100%;
  height: 500px;
  background-color: #d3dce6;
  margin-top: 20px;
  border-top: #13ce66 15px solid;
  border-radius: 100% 9% 100% 0% / 18% 100% 0% 100%;
  display: flex;
  justify-content: space-between;
}
</style>
